<template>
    <div>
        <div id="input1">
        权限名称 <el-input v-model="name" placeholder="请输入用户名称" style="width: 200px;"></el-input>
        </div>
        <div id="input3">
        权限编号 <el-input v-model="id" placeholder="请输入手机号" style="width: 200px;"></el-input>
        </div>
        <div id="choose">
       权限字符<el-input v-model="char" placeholder="请输入手机号" style="width: 200px;"></el-input>
        </div>
        <div id="icon1">
          <el-button type="primary" style="font-weight: 800;font-size: 15px;" @click="handleAdd"><i class="el-icon-plus"></i>新增</el-button>
        </div>
        <div id="icon2" @click="clear">
          <el-button><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
        <hr style="margin-top:120px">
        <el-table
    :data="tableData.filter(data => !name&&!char&&!id || data.name.toLowerCase().includes(name.toLowerCase())&&
    data.id.toLowerCase().includes(id.toLowerCase())&&data.char.toLowerCase().includes(char.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="权限编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="权限名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="权限字符"
      prop="char">
    </el-table-column>
    <el-table-column
      label="创建时间"
      prop="date">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
    <template v-slot="scope">
        <el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--修改信息的对话框-->
  <el-dialog
  title="修改信息"
  :visible.sync="dialogVisible"
  width="30%">
  <el-form  :model="editForm"  label-width="100px">
  <el-form-item label="权限名称">
    <el-input v-model="editForm.name"></el-input>
  </el-form-item>
  <el-form-item label="权限字符">
    <el-input v-model="editForm.char"></el-input>
  </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
    </span>
  </el-dialog>


<!--添加信息的对话框-->
  <el-dialog
  title="添加信息"
  :visible.sync="dialogVisible1"
  width="30%">
  <el-form  :model="editForm1"  label-width="100px">
    <el-form-item label="权限编号">
    <el-input v-model="editForm1.id"></el-input>
  </el-form-item>
  <el-form-item label="权限名称">
    <el-input v-model="editForm1.name"></el-input>
  </el-form-item>
  <el-form-item label="权限字符">
    <el-input v-model="editForm1.char"></el-input>
  </el-form-item>
  <el-form-item label="创建时间">
    <el-input v-model="editForm1.date"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: '',
      id:'',
      char:'',

      dialogVisible1: false,//新增对话框
      editForm1:{
        id:null,
        name:null,
        char:null,
        date:null
      },

      dialogVisible: false,//修改对话框
      currentEditRow:null,
      editForm:{
        id:null,
        name:null,
        phone:null,
        date:null
      },

        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          id: '10086',
          char:'abcdefg'
        },
        {
          date: '2022-02-02',
          name: '王大虎',
          id: '114514',
          char:'jnszstm'
        },
        {
          date: '2016-09-06',
          name: '王中虎',
          id: '123456',
          char:'nb666'
        },
        {
          date: '2016-05-02',
          name: '王胖虎',
          id: '654321',
          char:'whlanbnlgrbw'
        },
        {
          date: '2016-05-02',
          name: '王高虎',
          id: '513515',
          char:'qojmdwonq'
        }]//从后端获取，后期删掉
    }
  },
  methods:{
    add(){
      this.dialogVisible1=false
      //添加权限
      //传出 id-权限编号 char-权限字符 date-添加时间 name-权限名称
      //返回 success==true表示添加成功  tableData格式如上tableData
      axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/243214360',{
        id:this.editForm1.id,
        char:this.editForm1.char,
        date:this.editForm1.date,
        name:this.editForm1.name
      }).then(res=>{
        if(res.data.success){
          this.tableData=res.data.tableData
          alert("添加成功")
        }else alert("添加失败")
      })
    },
    handleAdd(){
      this.dialogVisible1=true
    },
    clear(){
      this.name='';
      this.id='';
      this.char='';
    },
    handleEdit(row){
      this.currentEditRow=row;
      this.editForm={...row};
      this.dialogVisible=true
    },
    update(){
      //更新权限 和上面添加类似
      this.dialogVisible=false;
      axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/243214360',{
        id:this.editForm.id,
        char:this.editForm.phone,
        name:this.editForm.name,
      }).then(res=>{
        if(res.data.success){
          this.tableData=res.data.tableData
          alert("修改成功")
          //后端返回修改后的所有数据，前端更新数据
        }else alert("修改失败")
      })
    },
    delete1(row) {
      //删除权限
      //传出 id-权限编号
      //返回数据和上面类似
      axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/243214360',{
        id:row.id
      }).then(res=>{
        if(res.data.success){
          alert("删除成功");
          this.tableData=res.data.tableData;
          alert(JSON.stringify(this.tableData))
        }else alert("删除失败")
      })
      /*************************返回数据格式如下（删除513515id）
       * {
          "success": true,
          "tableData": [
            {
            "date": "2016-05-02",
            "name": "王小虎",
            "id": "10086",
            "type": "管理员",
            "phone": "12345678"
            },
            {
            "date": "2022-02-02",
            "name": "王大虎",
            "id": "114514",
            "type": "学生",
            "phone": "1512515178"
            },
            {
            "date": "2016-09-06",
            "name": "王中虎",
            "id": "123456",
            "type": "老师",
            "phone": "123762362468"
            },
            {
            "date": "2016-05-02",
            "name": "王胖虎",
            "id": "654321",
            "type": "管理员",
            "phone": "12345678101213"
            }
          ]
        }*/
    },
    click(){
      alert('1');
    }
  }
}
</script>
<style>
#input1{
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    top: 30px;
    left: 330px;
}
#input2{
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    top: 90px;
    left: 330px;
}
#input3{
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    top: 30px;
    left: 700px;
}
#choose{
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    top:30px;
    left:1100px;
}
#icon1{
  position: absolute;
    top:90px;
    left:1150px;
}
#icon2{
  position: absolute;
    top:90px;
    left:1250px;
}
#icon3{
  position: absolute;
    top:180px;
    left:330px;
}
</style>